<template>
	<view class="w-full">
    <up-datetime-picker :show="show" v-model="innerValue" mode="date" @cancel="show = false" @confirm="handleConfirm"></up-datetime-picker>
		<view class="radius u-border flex items-center" @click="handleShow">
			<slot>
				<view class="value flex-1">{{ valueName }}</view>
				<up-icon name="arrow-down" color="#999" size="14"></up-icon>
			</slot>
		</view>
	</view>
</template>

<script setup>
import dayjs from 'dayjs';
import { ref, computed, watch } from 'vue';

const prop = defineProps({
	value: {
		type: Number,
	},
  placeholder: {
		type: String,
		default: '请选择'
	}
})
const emit = defineEmits(['update:value', 'confirm']);

const show = ref(false);

const innerValue = computed({
	get() {
		return prop.value||0
	},
	set(val) {
		emit('update:value', val)
	}
});

const valueName = computed(() => {
  if(!innerValue.value) {
    return prop.placeholder
  }
  return dayjs(innerValue.value*1000).format('YYYY-MM-DD');
});


function handleShow() {
	show.value = true;
}

function handleConfirm(e) {
	show.value = false;
	innerValue.value = parseInt(e.value/1000)
}

</script>
<style lang="scss" scoped>
.radius {
	border-radius: 4px;
	padding: 10rpx 20rpx;
}
</style>